<div class="modal-header-wrapper">
	<div class="modal-header">
		<div class="pull-right">
            <a class="action" ng-click="cancel()">&times; {{'GENERAL.ACTION.CANCEL-AND-CLOSE' | translate}}</a>
        </div>
		<h2 translate="FORM-DEPLOYMENTS.ACTION.UPLOAD"></h2>
	</div>
</div>
<div class="modal-body">

    <p>
        <i class="glyphicon glyphicon-info-sign"></i>
        {{'FORM-DEPLOYMENTS.POPUP.UPLOAD.DESCRIPTION' | translate}}
    </p>

    <div class="upload-deployment-form">

        <input type="file" ngf-select="onFileSelect($files)" style="font-size: smaller; padding-top:6px;" >
        <div class="dropbox"
             ngf-drop="onFileSelect($files)"
             ngf-drag-over-class="dragover"
             ng-show="dropSupported">
            {{'FORM-DEPLOYMENTS.POPUP.UPLOAD.DROPZONE' | translate}}
        </div>
        <div ngf-drop-available="dropSupported=true"
             ng-show="!dropSupported">{{'FORM-DEPLOYMENTS.POPUP.UPLOAD.NO-DROP' | translate}}</div>
        <div class="graph-wrapper" ng-show="status.loading" style="margin: 10px 0 10px 0">
            <div class="graph-bar" style="width:{{model.uploadProgress}}%"></div>
        </div>
        <button class="btn btn-danger btn-sm"
                ng-click="upload.abort()"
                ng-disabled="!status.loading"
                style="margin-bottom: 20px">
            {{'FORM-DEPLOYMENTS.POPUP.UPLOAD.CANCEL-UPLOAD' | translate}}
        </button>

    </div>

</div>

<div class="modal-footer-wrapper">
    <div class="modal-footer">
        <loading-indicator></loading-indicator>
        <div class="pull-right modeler-processes-error" ng-if="model.error">
            <span>{{'FORM-DEPLOYMENTS.POPUP.UPLOAD.ERROR' | translate}} <span ng-if="model.errorMessage"> : </span>{{model.errorMessage}}</span>
        </div>
    </div>
</div>
